{% extends 'home.html' %}
{% block content-title %}
    <title>{{ blog_obj.title }}</title>
{% endblock %}
{% block site-theme %}
    <link rel="stylesheet" href="/static/theme/{{ blog_obj.theme }}">
{% endblock %}
{% block content-nav %}
    <nav class="navbar navbar-inverse">  <!-- 导航条开始 -->
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">   <!-- BBS点击回首页 / 小屏变形 -->
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="{% url 'home' %}">{{ blog_obj.title }}</a>
            </div>  <!-- BBS点击回首页 / 小屏变形 -->
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">  <!-- 左侧导航菜单 -->
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                           aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li><a href="#">Separated link</a></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                </ul>  <!-- 左侧导航菜单结束 -->
                <form class="navbar-form navbar-left" id="form_search">  <!-- 搜索表单 -->
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search" id="input_search">
                    </div>
                    <button type="submit" class="btn btn-default">百度一下</button>
                </form>  <!-- 搜索表单结束 -->
                <ul class="nav navbar-nav navbar-right" style="display: flex">  <!-- 右侧导航菜单 -->
                    {% if request.user.is_authenticated %}  <!-- 用户登录页面 -->
                        <li><img src="/media/{{ request.user.avatar }}/" alt="头像走丢了"
                                 style="height: 50px;width: 50px;align-items: center" class="img-circle"></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                               aria-haspopup="true"
                               aria-expanded="false">{{ request.user.username }} <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#" data-toggle="modal" data-target="#editPwdModal">修改密码</a></li>
                                <li><a href="#" data-toggle="modal" data-target="#editAvatarModal">修改头像</a></li>
                                <li><a href="{% url 'backend:backend' %}">后台管理</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="{% url 'user:logout' %}">退出登录</a></li>
                            </ul>
                        </li>
                    {% else %}  <!-- 用户未登录页面 -->
                        <li><a href="{% url 'user:register' %}">注册</a></li>
                        <li><a href="{% url 'user:login' %}">登录</a></li>
                    {% endif %}
                </ul>  <!-- 右侧导航菜单结束 -->
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav> <!-- 导航条结束 -->
{% endblock %}
{% block content %}
    <div class="col-md-2">
        {% load blog_inclusion_tags %}
        {% left_menu request %}
    </div>
    <div class="col-md-9">
        {% block site-main %}
            {% for article_datum in article_data %}
                <ul class="media-list">
                    <li class="media">
                        <h4 class="media-heading"><a href="{% url 'article:detail' blog_obj.userinfo.username article_datum.pk %}">{{ article_datum.title }}</a></h4>
                        <div class="media-body">
                            <span>【概要】</span>
                            <p>{{ article_datum.desc }}</p>
                            <p class="pull-right">
                                <span>posted&nbsp;@</span>
                                <span>{{ article_datum.create_time|date:'Y-m-d H:i:s' }}&nbsp;&nbsp;</span>
                                <span> <span
                                        class="glyphicon glyphicon-thumbs-up"></span>{{ article_datum.up_count }}&nbsp;&nbsp;</span>
                                <span> <span
                                        class="glyphicon glyphicon-thumbs-down"></span>{{ article_datum.down_count }}&nbsp;&nbsp;</span>
                                <span> <span
                                        class="glyphicon glyphicon-comment"></span>{{ article_datum.comment_count }}&nbsp;&nbsp;</span>
                            </p>
                        </div>
                        <hr>
                    </li>
                </ul>
            {% endfor %}
            <div class="text-center">{{ page_html|safe }}</div>
        {% endblock %}
    </div>
{% endblock %}